<template>
  <!-- 主页面左侧组件列表项 -->
  <!-- 面授模式 -->
  <div id="vy-theme-face">
    <div class="vy-theme-list">
      <div class="vy-theme-container" ref="themes">
        <div class="vy-theme-panel">
          <div class="vy-wrapper">
            <div class="vy-box">
              <div class="vy-box-left">主题列表</div>
              <div class="vy-box-center">&nbsp;</div>
              <!-- <div class="vy-box-right">排序</div> -->
            </div>
            <div class="vy-box-desc">按照设定的时间顺序解锁主题</div>
          </div>
          <div class="vy-btn-wrapper">
            <a-button icon="plus" @click="click_add_theme">添加主题</a-button>
          </div>
        </div>
        <div class="vy-theme-labels">
          <template v-for="(tag, index) in tags">
            <div
              class="tab-item"
              :key="tag.id"
              :class="{ actived: tag.selected }"
              v-dragging="{ item: tag, list: tags, group: 'tag' }"
              @click="click_selected_tab(tag)"
            >
              <div class="vy-tag">
                <div class="vy-dropflag">
                  <a-icon type="more" style="width:5px;" />
                  <a-icon type="more" style="width:5px;" />
                </div>
                <div class="vy-tag-left">{{ index + 1 }}</div>
                <div class="vy-tag-center">
                  <span class="vy-tag-title">{{ tag.name }}</span
                  ><br />
                  <span class="vy-tag-time"
                    >{{ tag.startTime | showDateTime }} /
                    {{ tag.endTime | showDateTime }}</span
                  >
                </div>
                <div class="vy-tag-right">
                  <a-dropdown :trigger="['click']">
                    <a-icon type="ellipsis" />
                    <a-menu slot="overlay">
                      <a-menu-item key="0">
                        <a-button
                          type="link"
                          icon="edit"
                          @click="click_rename_theme(tag)"
                          >编辑</a-button
                        >
                      </a-menu-item>
                      <a-menu-item key="1">
                        <a-button
                          type="link"
                          icon="delete"
                          @click="click_delete_theme(tag, index)"
                          >删除</a-button
                        >
                      </a-menu-item>
                    </a-menu>
                  </a-dropdown>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <a-modal
        :title="modalTitle"
        centered
        :maskClosable="false"
        :closable="false"
        v-model="modalVisible"
      >
        <template slot="footer">
          <a-button class="vy-modal_cancel" @click="click_modal_cancel"
            >取消</a-button
          >
          <a-button class="vy-modal_ok" type="primary" @click="click_modal_ok"
            >确认</a-button
          >
        </template>

        <vy-theme-edit ref="themeedit" :source="editItem"></vy-theme-edit>
      </a-modal>
    </div>
  </div>
</template>

<script>
import VyThemeEdit from "./tpl/edit_theme.vue";
import DateUtils from "../../../js/date.util.js";

export default {
  name: "vy-theme-face",
  data() {
    return {
      modalVisible: false, // modal 框 显隐状态
      modalType: 0, // 0: 新增; 1: 重命名
      editItem: {}, // 编辑的主题标签对象
      tags: [], // 主题列表
      tabActiveKey: -1, // 激活 tab 面板的 key
      projectId: null, // 项目id
    };
  },
  components: {
    [VyThemeEdit.name]: VyThemeEdit,
  },
  computed: {
    modalTitle() {
      let _title = "";
      switch (this.modalType) {
        case 0:
          _title = "新增主题";
          break;
        case 1:
          _title = "重命名";
          break;
      }
      return _title;
    },
  },
  filters: {
    showDateTime(val) {
      if (val) {
        let date = new Date(val.replace(/-/gi, "/"));
        return DateUtils.format(date, DateUtils.FMT.MDHM);
      }
    },
  },
  created() {
    this.projectId = this.$route.query.projectId;
  },
  mounted() {
    this.$nextTick(() => {
      this.$dragging.$off("dragend");
      this.$dragging.$on("dragend", (res) => {
        this.saveThemeSortList();
      });
      this.queryInfo();
      // 监听主题列表刷新事件
      this.$bus.on("refreshThemeList", () => {
        this.queryInfo();
      });
    });
  },
  methods: {
    // 保存主题列表排序功能
    saveThemeSortList() {
      let _list = JSON.parse(JSON.stringify(this.tags));
      _list.forEach((item) => {
        delete item.selected;
      });
      let params = {
        projectId: this.projectId,
        moduleList: _list,
      };
      this.$axios.post("/module/updateOrderByBatch", params).then((res) => {
        if (res.success) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 重置弹框内容
    resetModal() {
      this.editItem = {};
      this.modalType = 0;
      this.modalVisible = false;
    },
    doTabActive(val) {
      // 将激活的tab面板选中值保存至缓存中
      sessionStorage.setItem("vy@activedKey", val);
      let _tag = this.tags.filter((tag) => tag.id == val);
      if (_tag.length) {
        _tag[0].selected = true; // 选中主题项
        this.$bus.emit("activeLeftTab", _tag[0]); // 触发右侧组件事件
      } else {
        this.$bus.emit("activeLeftTab", {}); // 触发右侧组件事件
      }
    },
    // 查询项目信息
    queryInfo() {
      let params = {
        projectId: this.projectId,
      };
      this.$axios.get("/module/list", { params }).then((res) => {
        let list = res.moduleVos || [];
        list.forEach((item) => {
          if (item.startTime && moment.isDate(new Date(item.startTime))) {
            let _startTime = new Date(item.startTime);
            item.startTime = DateUtils.format(_startTime, DateUtils.FMT.YMDHMS);
          }
          if (item.endTime && moment.isDate(new Date(item.endTime))) {
            let _endTime = new Date(item.endTime);
            item.endTime = DateUtils.format(_endTime, DateUtils.FMT.YMDHMS);
          }
          item.selected = false; // 是否选中
        });
        // 排序
        // list.sort((a, b) => {
        //   return a.orderNum - b.orderNum;
        // });
        this.tags = list;
        // 设置之前选中的tab状态
        this.tabActiveKey = +(sessionStorage.getItem("vy@activedKey") || -1);
        // this.$bus.emit("activeLeftTab", this.tabActiveKey); // 触发右侧组件事件
        this.doTabActive(this.tabActiveKey);
      });
    },
    // 创建&更新 主题
    saveAndUpdateInfo(params) {
      let promise = null;
      if (this.modalType == 0) {
        // 创建
        delete params.id;
        promise = this.$axios.post("/module/create", params);
      } else if (this.modalType == 1) {
        delete params.projectId;
        // 更新
        promise = this.$axios.post("/module/update", params);
      }
      if (promise) {
        promise.then(
          (res) => {
            this.resetModal();
            if (res.success) {
              this.$message.success(res.msg);
            } else {
              this.$message.error(res.msg);
            }
            this.queryInfo(); // 重新查询主题列表
          },
          (fail) => {
            this.resetModal();
          }
        );
      }
    },
    // 删除主题
    deleteInfo(params) {
      this.$axios.post("/module/delete", params).then((res) => {
        if (res.success) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
        this.queryInfo(); // 重新查询主题列表
      });
    },
    // 添加主题 - 按钮
    click_add_theme() {
      this.modalType = 0;
      this.editItem = {};
      this.modalVisible = true;
    },
    // 重命名主题 - 按钮
    click_rename_theme(item) {
      this.modalType = 1;
      this.editItem = item;
      this.modalVisible = true;
    },
    // 删除主题 - 按钮
    click_delete_theme(item) {
      this.$confirm({
        title: "温馨提示",
        content: "您确定要删除该主题吗？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          let params = { id: item.id };
          this.deleteInfo(params);
          this.tabActiveKey = "";
          this.doTabActive(this.tabActiveKey);
        },
        onCancel: () => {},
      });
    },
    // modal 框 - 取消
    click_modal_cancel() {
      this.resetModal();
    },
    // modal 框 - 确认按钮
    click_modal_ok() {
      let _formData = this.$refs["themeedit"].getFormData();
      if (!_formData.name) {
        this.$message.error("请输入主题名称");
        return;
      }
      if (!_formData.startTime) {
        this.$message.error("请输入开始时间");
        return;
      }
      if (!_formData.endTime) {
        this.$message.error("请输入结束时间");
        return;
      }
      let params = Object.assign(
        {
          projectId: this.projectId,
        },
        _formData
      );
      this.saveAndUpdateInfo(params); // 创建&更新 主题
    },
    // 切换 tab 面板的回调
    click_selected_tab(item) {
      this.tags.forEach((tag) => {
        tag.selected = false;
      });
      item.selected = true;
      this.tabActiveKey = item.id;
      this.doTabActive(this.tabActiveKey);
    },
  },
};
</script>

<style lang="scss">
#vy-theme-face {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .vy-theme-list {
    width: 100%;
    height: 100%;
    .vy-theme-container {
      .vy-theme-panel {
        padding: 25px;
        .vy-wrapper {
          padding: 10px 0 20px;
          .vy-box {
            display: flex;
            align-items: center;
            .vy-box-left {
              width: 100px;
              font-size: 18px;
              font-weight: 500;
              color: rgba(0, 0, 0, 1);
            }
            .vy-box-center {
              flex: 1;
            }
            .vy-box-right {
              width: 50px;
              font-weight: 400;
              font-size: 13px;
              text-align: right;
              color: rgba(51, 102, 255, 1);
            }
          }
          .vy-box-desc {
            font-size: 12px;
            padding-top: 5px;
            font-weight: 400;
            color: rgba(184, 184, 184, 1);
          }
        }
        .vy-btn-wrapper {
          text-align: center;
          .ant-btn {
            color: rgba(51, 102, 255, 1);
            border-color: #3366ff;
          }
        }
      }
      .vy-theme-labels {
        .vy-tag {
          display: flex;
          position: relative;
          .vy-dropflag {
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translateY(-50%);
          }
          .vy-tag-left {
            width: 60px;
            margin: auto;
            color: #757575;
            text-align: center;
          }
          .vy-tag-center {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            flex: 1;
            .vy-tag-title {
              font-size: 16px;
            }
            .vy-tag-time {
              font-size: 12px;
              color: rgba(117, 117, 117, 1);
            }
          }
          .vy-tag-right {
            // padding: 0 10px;
            margin: auto;
            color: #757575;
            text-align: center;
            .anticon {
              margin-right: 0;
              transform: rotate(90deg);
              padding: 5px;
            }
          }
        }
        .tab-item {
          margin: 0;
          padding: 16px 8px 16px 0;
          cursor: pointer;
          position: relative;
          text-align: left;
          background: #ffffff;
          color: rgba(0, 0, 0, 0.65);
          border-bottom: 1px solid #ededed;
          &:first-child {
            border-top: 1px solid #ededed;
          }
          &:hover {
            color: #40a9ff;
          }
          &.actived {
            color: #3366ff;
            background: #f6f6f6;
            &::before {
              position: absolute;
              content: "";
              top: 0;
              bottom: 0;
              width: 5px;
              background: #1890ff;
            }
          }
        }
      }
    }
  }
}
.ant-dropdown-menu-item {
  .ant-btn {
    color: #4a4a4a;
  }
}

.ant-modal {
  .ant-modal-footer {
    .vy-modal_cancel {
      border: none;
    }
    .vy-modal_ok {
      background: rgba(51, 102, 255, 1);
    }
  }
}
</style>
